<!-- 面包屑 -->
<template>
  <div id="Breadcrumb">
    <!-- 面包屑默认 -->
    <template v-if="$store.state.BreadcrumbType === 'default'">
      <div class="breadcrumb_box">
        <div class="breadcrumb_l">
          <label class="index_style" @click="GotoIndex">首页</label>
          <label class="margin_l_10 margin_r_10 separator">{{ $store.state.BreadcrumbSeparator }}</label>
          <div v-for="(breadcrumb, breadcrumbindex) in GetBreadcrumbList" :key="breadcrumbindex">
            <label :class="breadcrumbindex !== GetBreadcrumbList.length - 1?'':'finally'">{{ breadcrumb.meta.title }}</label>
            <label v-if="breadcrumbindex !== GetBreadcrumbList.length - 1" class="margin_l_10 margin_r_10 separator">{{ $store.state.BreadcrumbSeparator }}</label>
          </div>
        </div>
      </div>
    </template>
    <!-- 面包屑默认END -->
  </div>
</template>

<script>
export default {
  name: 'Breadcrumb',
  data() {
    return {
      GetBreadcrumbList: [], // 面包屑列表
      BreadcrumTableTabs: this.$store.state.BreadcrumTableTabs // 标签页
    }
  },
  /* HTML DOM加载后马上执行的，如赋值*/
  computed: {},

  /* 观察Vue实例上的数据变动 */
  watch: {},

  /* 模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图 */
  created() {},

  /* 模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作 */
  mounted() {
    this.GetBreadcrumb()
  },

  /* methods则必须要有一定的触发条件才能执行 */
  methods: {
    // 生成面包屑
    GetBreadcrumb() {
      // console.log('获取左侧全部菜单', this.$router.options)
      // 只获取后台页面路由
      const NewMenusList = []
      this.$router.options.routes.forEach(element => {
        // console.log('11', element.meta.RouterModule)
        // 所有路由中拿到后台路由（meta === backstage）且path 不为/backstage的路由数组
        if (element.meta.RouterModule === 'backstage' && element.path !== '/backstage') {
          NewMenusList.push(element)
        }
      })
      // console.log('获取处理后左侧全部菜单', NewMenusList)
      const matched = this.$route.matched.filter(item => item.name)
      const first = matched[0]
      // 得出当前选中的路由
      const result = NewMenusList.find(item => {
        return item.redirect === first.redirect
      })
      // 判断选中的路由时否有大于1的子路由，大于1则正常输出，等于1则只取最后一项
      if (result.children.length > 1) {
        // console.log('result.children.length > 1')
        this.GetBreadcrumbList = matched
      } else {
        // console.log('result.children.length = 1')
        this.GetBreadcrumbList = matched.slice(-1)
      }
      if (window.sessionStorage.getItem('DefaultActive')) {
        this.sessionStorageActive = window.sessionStorage.getItem('DefaultActive')
      } else {
        window.sessionStorage.setItem('DefaultActive', this.$route.path)
        this.sessionStorageActive = this.$route.path
      }
    },
    // 面包屑回首页
    GotoIndex() {
      this.$router.push('/backstage_home/index')
      window.sessionStorage.setItem('DefaultActive', '/backstage_home/index')
    },
    // 面包屑点击跳转
    ActiveButton(ActiveButton) {
      window.sessionStorage.setItem('DefaultActive', ActiveButton.path)
      this.sessionStorageActive = ActiveButton.path
      this.$router.push(ActiveButton.path)
    }
  }
}
</script>

<style lang='scss' scoped>
#Breadcrumb{
  background: #fff;
  display:flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  padding:10px 20px;
  border-radius: 10px;
  font-size: 1.2rem;
  font-weight: bold;
  .breadcrumb_box{
    width: 100%;
    display: flex;
    height: 40px;
    align-items: center;
    .breadcrumb_l{
      flex: 1;
      display: flex;
      align-items: center;
      .index_style{
        cursor: pointer;
      }
      .index_style:hover{
        color: #409EFF;
      }
      .separator{
        font-weight: 700;
        color: #C0C4CC;
      }
      .finally{
        color: #C0C4CC;
      }
      .el_tag_style{
        cursor: pointer;
      }
    }
    .breadcrumb_r{
      width: 30px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
